<template>
  <el-container direction="vertical">
    <el-form :model="pwdForm" :rules="rules" ref="pwdForm">
      <el-form-item label="原密码" prop="oldPwd">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="pwdForm.oldPwd"
          clearable
          show-password
          placeholder="请输入原密码">
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="pwdForm.newPwd"
          clearable
          show-password
          placeholder="请输入新密码">
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repPwd">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="pwdForm.repPwd"
          clearable
          show-password
          placeholder="请确认新密码">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('pwdForm')">修改</el-button>
        <el-button type="default" @click="resetForm('pwdForm')">重置</el-button>
        <el-button type="info" @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  import Qs from 'qs'
  export default {
    name: "ModifyPasswordPage",
    data(){
      let repPwdCheck = (rule, value, callback) => {
        if(value !== this.pwdForm.newPwd){
          callback(new Error('两次输入的密码不一致!'));
        }else {
          callback();
        }
      };
      return{
        user: {},
        pwdForm:{
          id: null,
          oldPwd: '',
          newPwd: '',
          repPwd: '',
        },
        rules:{
          oldPwd:[
            { required:true,message:'请输入原密码',trigger:'blur'},
          ],
          newPwd:[
            { required:true,message:'请输入新密码',trigger:'blur'},
            { min:5,max:15,message:'新密码长度必须在5-15位之间',trigger:'blur'}
          ],
          repPwd:[
            { required:true,message:'请确认新密码',trigger:'blur'},
            { validator: repPwdCheck,trigger: "blur"}
          ]
        }
      }
    },
    created() {
      let userStr = sessionStorage.getItem('user') || '{}';
      this.user = JSON.parse(userStr);
      this.pwdForm.id = this.user.id;
    },
    methods:{
      logout(){
        sessionStorage.removeItem('user');
        this.$router.push('/login');
      },
      /* 提交表单函数 */
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = Qs.stringify({
              id: this.pwdForm.id,
              oldPwd: this.pwdForm.oldPwd,
              newPwd: this.pwdForm.newPwd
            });
            this.$http.put('/user/password',params)
              .then((response) => {
                if(response.status === 200){
                  if(response.data.code === 10000){
                    this.$notify({
                      title: '密码修改成功',
                      message: '请重新登录',
                      type: 'success',
                      duration: 1000
                    });
                    this.pwdForm = {};
                    this.logout();
                  }else if (response.data.code === 10017) {
                    this.$notify({
                      title: '警告',
                      message: response.data.msg,
                      type: 'warning',
                      duration: 1000
                    });
                  } else {
                    this.$notify.error({
                      title: '错误',
                      message: response.data.msg,
                      duration: 1000
                    });
                  }
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.status + response.statusText,
                    duration: 1000
                  });
                }
              })
          }
        });
      },
      /* 重置表单函数 */
      resetForm(formName){
        this.$refs[formName].resetFields();
      }
    },
  }

</script>

<style scoped>
.el-form-item {
  margin: 0 0 15px;
}
</style>
